/**
 * 登录输入框组件
 */
import React, {Component} from 'react'
import axios from 'axios'

const URL = "http://127.0.0.1:8000"

class LoginInput extends Component{

    constructor(props) {
        super(props);
        this.url = URL
        this.state = {
            username:'',
            password:''
        }
        // 绑定事件
        this.handleSubmit = this.handleSubmit.bind(this)
        this.handleUserNameOnChange = this.handleUserNameOnChange.bind(this)
        this.handlePassWordOnChange = this.handlePassWordOnChange.bind(this)
        
    }

    // 传递用户名
    handleUserNameOnChange(event){
        this.setState({
            username: event.target.value
        })
    }

    // 传递密码
    handlePassWordOnChange(event){
        this.setState({
            password: event.target.value
        })
    }
    
    handleSubmit(){
        // alert('username:'+ this.state.username + '\n' +'password:' + this.state.password);
        let header = {'Content-Type':'application/x-www-form-urlencoded'}
        var data = new FormData();
        data.set('username', this.state.username);
        data.set('password', this.state.password);
        axios.post(this.url+'/api/login/', data, {headers: header}
    ).then((response)=> {
            console.log(response)}
        ).catch((error)=> {
            console.log(error)}
        )
    }

    render(){
        return (
            <div className="login-input">
                <div className="login-field">
                    <span className="login-field-name">用户名:</span>
                    <div className="login-field-input">
                        <input value={this.state.username} 
                        onChange={this.handleUserNameOnChange} />
                    </div>
                </div>
                <div className="login-field">
                    <span className="login-field-name">密码:</span>
                    <div className="login-field-input">
                        <input value={this.state.password} type='password'
                        onChange={this.handlePassWordOnChange} />
                    </div>
                </div>
                <div className="login-field-button">
                    <button onClick={this.handleSubmit}>
                        登录
                    </button>
                </div>
            </div>
        );
    }
}

export default LoginInput;